<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>藏文华容道 | Tibetan Sliding Puzzle</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Tibetan&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header>
            <h1>藏文华容道</h1>
            <h2>Tibetan Sliding Puzzle</h2>
        </header>

        <div class="game-controls">
            <div class="difficulty">
                <label for="difficulty-select">难度：</label>
                <select id="difficulty-select">
                    <option value="3" selected>简单 (3×3)</option>
                    <option value="4">中等 (4×4)</option>
                    <option value="5">困难 (5×7)</option>
                </select>
            </div>
            <div class="level-select">
                <label for="level-select">关卡：</label>
                <select id="level-select">
                    <option value="1" selected>第一关</option>
                    <option value="2">第二关</option>
                    <option value="3">第三关</option>
                    <option value="4">第四关</option>
                </select>
            </div>
            <button id="start-button">开始游戏</button>
            <div class="moves">移动次数: <span id="move-count">0</span></div>
            <div class="timer">时间: <span id="time-count">00:00</span></div>
        </div>

        <div class="game-board" id="game-board">
            <!-- 游戏板将由JavaScript动态生成 -->
        </div>

        <div class="message" id="message">
            <!-- 游戏消息将在这里显示 -->
        </div>

        <!-- 胜利弹窗 -->
        <div class="victory-modal" id="victory-modal">
            <div class="victory-content">
                <div class="confetti"></div>
                <h2 class="victory-title">恭喜通关！</h2>
                <div class="victory-info">
                    <p>您完成了 <span id="victory-level">第1关</span></p>
                    <p>移动次数: <span id="victory-moves">0</span></p>
                    <p>用时: <span id="victory-time">00:00</span></p>
                </div>
                <div class="victory-buttons">
                    <button id="play-again-btn">再玩一次</button>
                    <button id="next-level-btn">下一关</button>
                </div>
            </div>
        </div>

        <div class="info-section">
            <h3>关于藏文字母</h3>
            <p>藏文是藏族使用的文字，有30个基本字母。这个游戏使用藏文字母作为拼图块，帮助您在娱乐的同时了解藏文。</p>

            <div class="collapsible-section">
                <div class="collapsible-header">
                    <h3>关卡说明</h3>
                    <span class="toggle-icon">▼</span>
                </div>
                <div class="collapsible-content">
                    <h4>简单难度 (3×3)</h4>
                    <div class="level-info">
                        <div class="level-item">
                            <h4>第一关</h4>
                            <p>藏文字母：ཀ ཁ ག ང ཅ ཆ ཇ ཉ</p>
                        </div>
                        <div class="level-item">
                            <h4>第二关</h4>
                            <p>藏文字母：ཏ ཐ ད ན པ ཕ བ མ</p>
                        </div>
                        <div class="level-item">
                            <h4>第三关</h4>
                            <p>藏文字母：ཙ ཚ ཛ ཝ ཞ ཟ འ ཡ</p>
                        </div>
                        <div class="level-item">
                            <h4>第四关</h4>
                            <p>藏文字母：ར ལ ཤ ས ཧ ཨ + 特殊色块</p>
                        </div>
                    </div>

                    <h4>中等难度 (4×4)</h4>
                    <div class="level-info">
                        <div class="level-item">
                            <h4>第一关</h4>
                            <p>前15个藏文字母：ཀ ཁ ག ང ཅ ཆ ཇ ཉ ཏ ཐ ད ན པ ཕ བ</p>
                        </div>
                        <div class="level-item">
                            <h4>第二关</h4>
                            <p>后15个藏文字母：མ ཙ ཚ ཛ ཝ ཞ ཟ འ ཡ ར ལ ཤ ས ཧ ཨ</p>
                        </div>
                    </div>

                    <h4>困难难度 (7×5)</h4>
                    <div class="level-info">
                        <div class="level-item">
                            <h4>第一关</h4>
                            <p>所有30个藏文字母和4个元音符号（ི ུ ེ ོ）</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <p>藏文华容道 &copy; 2023</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>
